<template>
  <div class="home">
    <el-container>
      <!-- 管理平台 -->
      <el-header>
        <h2>管理平台</h2>
        <p>
          <span>欢迎:{{ username }}</span>
          <el-button @click="tuiChu">退出</el-button>
        </p>
      </el-header>
      <el-container>
        <!-- 左侧菜单 -->
        <el-aside :width="isCollapse ? '60px' : '200px'">
          <el-col>
            <h3 @click="isCollapse = !isCollapse">|||</h3>
            <el-menu
              :default-active="$route.path"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              :collapse="isCollapse"
              :collapse-transition="false"
              :unique-opened="true"
              :router="true"
            >
              <el-submenu v-for="v in usernames" :key="v.id" :index="v.id+''">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{v.authName}}</span>
                </template>
                <el-menu-item v-for="vc in v.children" :key="vc.id" :index="'/'+ vc.path">{{vc.authName}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>
            <!-- {{$store.state.users.username}} -->
            <!-- {{username}} -->
            <!-- {{uu}} -->
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { menus } from "@/http/user/user.js";
export default {
  data() {
    return {
      usernames: [],
      isCollapse: false,
    };
  },
  created(){
    this.menusA()
  },
  methods: {
    async menusA(){
        let res=await menus()
        console.log(res);
        // this.$message.success(res.meta.msg);
        this.usernames=res.data
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    tuiChu(){
      this.$store.commit('users/DELETE_TOKEN')
      this.$store.commit('users/DELETE_USERNAME')
      this.$router.push("/Login");
    }
  },
  computed:{
    // uu(){
    //     return this.$store.state.users.username
    // },
    //  ...mapState('users',['username']),
    ...mapGetters(['username'])
  },
  watch:{
    $route(n){
      // console.log(n);
      localStorage.setItem('CurrentRoute',n.path)
    }
  }
};
</script>
<style lang="scss" scoped>
.el-header {
  background-color: #373d41;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  color: #ffff;
  span {
    padding-right: 10px;
  }
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
h3 {
  background-color: #4a5064;
  color: white;
  text-align: center;
}
</style>